{% extends 'base.html' %}

{% block head %}
<title>login</title>
{% endblock %}

{% block body %}
	<div class="content">
		<button onclick="gotoregister()">register</button><br><br>
		<input id="username" type="text" name="username" placeholder="username"> <br><br>
		<input id="password" type="password" name="password" placeholder="password"> <br><br>
		<button onclick="login()">login</button>
	</div>
	<script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
	<script>
		function gotoregister() { window.location = '/register'; }
		function login() {
			username = $('#username').val().trim();
			password = $('#password').val().trim();
			if (username == '') { alert('username can`t be empty'); return false; }
			else if (password == '') { alert('password can`t be empty'); return false; }
			else {
				$.post({
					url: '/login',
					data: {'username': username, 'password': password},
					success: function (data) {
						console.log(data)
						if (data == 'true') { window.location = '/'; }
						else { alert('Incorrect username or password'); }
					}
				})
			}
		}
	</script>
{% endblock %}
